<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6"
        ><el-card>
          <Detail title="总销售额" count="￥ 126560">
            <template slot="charts">
              <span style="display: inline-block; margin-right: 15px"
                >周同比 56.67%
                <svg
                  style="vertical-align: sub"
                  t="1666591546370"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="9290"
                  width="16"
                  height="16"
                >
                  <path
                    d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
                    p-id="9291"
                    fill="#d81e06"
                  ></path>
                </svg>
              </span>
              <span
                >日同比 19.96%
                <svg
                  style="vertical-align: sub"
                  t="1666591675650"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="10374"
                  width="16"
                  height="16"
                >
                  <path
                    d="M64 320l448 448 448-448z"
                    fill="#1afa29"
                    p-id="10375"
                  ></path></svg
              ></span>
            </template>
            <template slot="footer">
              <span>日销售额￥ 12423</span>
            </template>
          </Detail>
        </el-card></el-col
      >
      <el-col :span="6"
        ><el-card>
          <Detail title="访问量" count="￥ 88460">
            <template slot="charts">
              <!-- 折线图 -->
              <lineCharts></lineCharts>
            </template>
            <template slot="footer">
              <span>日访问量 1234</span>
            </template>
          </Detail>
        </el-card></el-col
      >
      <el-col :span="6"
        ><el-card>
          <Detail title="支付笔数" count="￥ 88460">
            <template slot="footer">
              <span>转化率64%</span>
            </template>
            <template slot="charts">
              <!-- 柱状图 -->
              <barCharts></barCharts>
            </template>
          </Detail> </el-card
      ></el-col>
      <el-col :span="6"
        ><el-card>
          <Detail title="运营活动效果" count="￥ 78%">
            <template slot="footer">
              <span style="display: inline-block; margin-right: 15px"
                >周同比 56.67%
                <svg
                  style="vertical-align: sub"
                  t="1666591546370"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="9290"
                  width="16"
                  height="16"
                >
                  <path
                    d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
                    p-id="9291"
                    fill="#d81e06"
                  ></path>
                </svg>
              </span>
              <span
                >日同比 19.96%
                <svg
                  style="vertical-align: sub"
                  t="1666591675650"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="10374"
                  width="16"
                  height="16"
                >
                  <path
                    d="M64 320l448 448 448-448z"
                    fill="#1afa29"
                    p-id="10375"
                  ></path></svg
              ></span>
            </template>
            <template slot="charts">
              <!-- 进度条 -->
              <progressCharts></progressCharts>
            </template>
          </Detail> </el-card
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "./detail";
import lineCharts from "./lineCharts";
import barCharts from "./barCharts";
import progressCharts from "./progressCharts";
export default {
  name: "Card",
  components: { Detail, lineCharts, barCharts, progressCharts },
};
</script>

<style></style>
